<template>
 <div>
 <!-- <Header></Header> -->
  <div class="login">
    
    <el-card class="re-card" v-if="this.display">
      <div class="sign"><span>登 录</span></div>
      <div class="card">
        <el-form
          :model="user"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class=""
        >
          <el-form-item prop="username">
            <el-input
              v-model="user.username"
              autocomplete="off"
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              size="medium"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="user.password"
              autocomplete="off"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              size="medium"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="okk">
            <el-button size="medium" @click="goRegister">注册</el-button>
            <el-button type="primary" size="medium" @click="ok">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="re-card" v-if="!this.display" >
      <div class="registerName"><span>注 册</span></div>
      <div class="registerCard">
        <el-form
            :model="user"
            status-icon
            :rules="rules1"
            ref="ruleForm"
            label-width="100px"
            class=""
        >
          <el-form-item prop="username">
            <el-input
                v-model="user.username"
                autocomplete="off"
                placeholder="请输入账号"
                prefix-icon="el-icon-user"
                size="medium"
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="昵称">
            <el-input
                v-model="user.nickname"
                autocomplete="off"
                placeholder="请输入昵称"
                prefix-icon="el-icon-user"
                size="medium"
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item >
            <el-input
                v-model="user.phone"
                autocomplete="off"
                placeholder="请输入手机号"
                prefix-icon="el-icon-user"
                size="medium"
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                type="password"
                v-model="user.password"
                autocomplete="off"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                size="medium"
                clearable
            ></el-input>
          </el-form-item>
<!--          <el-form-item class="radio">-->
<!--            <el-radio-group v-model="radio">-->
<!--              <el-radio :label="1">用户</el-radio>-->
<!--              <el-radio :label="2">店主</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item class="btn">
            <el-button size="medium" @click="regist">确定</el-button>
            <el-button type="primary" size="medium" @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- <img src="../../assets/background.jpg" alt=""> -->
  </div>
</div>
</template>

<script>
export default {
  components: {
  },
  props: {},
  data() {
    return {
      radio: 1,
      display: true,
      user: {
        username: '',
        password: '',
        nickname: '',
        phone: '',
      },
      rules: {
        username: [
          { require: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
        ],
        password: [
          { require: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在6到16个字符", trigger: "blur" },
        ],
      },
      rules1: {
        username: [
          { require: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
        ],
        nickname: [
          { require: true, message: "请输入昵称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
        ],
        phone: [
          { require: false, message: "请输入手机号", trigger: "blur" },
        ],
        password: [
          { require: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在6到16个字符", trigger: "blur" },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    clear() {
      this.user.username = ''
      this.user.password = ''
      this.user.nickname = ''
      this.user.phone = ''
      this.radio = 1
    },
    back() {
      this.clear()
      this.user.username = ''
      this.user.password = ''
      this.user.nickname = ''
      this.user.phone = ''
      this.radio = 1
      this.display = true;
    },
    goRegister() {
      this.clear()
      this.display = false;
    },
    // 注册
    regist() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let registerDto = {
            username: this.user.username,
            password: this.user.password,
            nickname: this.user.nickname,
            phone: this.user.phone,
            role: this.radio === 1 ? 'ROLE_USER' : 'ROLE_ADMIN',
          }
          this.request.post("/user/register", registerDto).then((res) => {
            if (res.data.code === "200") {
              this.$message.success("注册成功,请登录！");
              // 注册成功后，把user保存下来
              localStorage.setItem("user", JSON.stringify(res.data));
              // 清除输入框的账号和密码
              this.back();
            } else {
              this.$message.warning(res.data.msg);
            }
          });
        } else {
          this.$message.error("密码输入不正确！");
          return false;
        }
      });
    },
    // 登录
    ok() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.request.post("/user/login", this.user).then((res) => {
            if (res.data.code === "200") {
              localStorage.setItem("user", JSON.stringify(res.data));
              //  如果身份是"ROLE_USER"，就跳到前台
              if (res.data.data.role == "ROLE_USER") {
                this.$emit("call-father");
                this.$router.push("/");
              }else if(res.data.data.role == "ROLE_ADMIN"){
                //  如果身份是" 管理员"，就跳到后台
                this.$emit("call-father");
                this.$router.push("/admin/home");
              }
            } else if (res.data.code === "600") {
              this.$message.error("密码输入不正确！您确定已注册成功？");
            }
          });
        } else {
          // console.log('error submit!!');
          this.$message.error("密码输入不正确！");
          return false;
        }
      });
    },
  },
  created() {

  },
  mounted() {
    this.$emit("call-father");
  },
};
</script>
<style lang="less" scoped>
.login {
  height: 120vh;
  background-image: url(../../assets/background.jpg);

  //   overflow: hidden;
  .el-card {
    // width: 400px;
    width: 30%;
    height: 380px;
    position: fixed;
    top: 220px;
    left: 530px;
    border-radius: 15px;

    // 登录
    .sign {
      text-align: center;
      // margin: 20px 140px;
      font-size: 24px;
      // font-weight: 3;
    }
    .card {
      margin-top: 10px;
      .el-form-item {
        // margin-left: 0;
        .el-form-item__content {
          margin-left: 0px !important;
        }
      }

      .el-input {
        margin: 20px 0px 20px -30px;
        width: 90%;
      }
      .okk {
        button {
          margin: 0 20px;
        }
      }
    }
  }
}
.re-card {
  margin: -30px 0px;
}
// 登录
.registerName {
  text-align: center;
  // margin: 20px 140px;
  font-size: 24px;
  // font-weight: 3;
}
.registerCard {
  margin: 10px -20px;
  .el-form-item {
    height: 30px;
    margin-right: 50px;
  }
}
.btn {
  button {
    margin: 0 30px;
  }
}
.radio {
  margin-left: 60px;
}
</style>